<template>
	<swiper ref="mySwiper" :options="swiperOptions" class="swiper1">
		<swiper-slide v-for="item in listTop" :key='item.id'>
				<img :src="item.image" class="image" />
			<div class="text">
				<p>{{item.title}}</p>
				<p>{{item.hint}}</p>
			</div>
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
	export default {
		name: 'carrousel',
		data() {
			return {
				swiperOptions: {
					loop: true,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
				},
				listTop: [],
			}
		},
		created: function() {
			this.$axios({
				url: "http://192.168.10.50/daily/index.php/Home/daily/latest",
				methods: "get"
			}).then((response) => {
				// console.log(response.data.top_stories)
				this.listTop = response.data.top_stories
			})
		}
	}
</script>
<style>
	.swiper1 {
		position: relative;
	}

	.image {
		width: 100%;
		height: 260px;
	}

	.swiperImg {
		width: 100%;
	}

	.text {
		position: absolute;
		left: 0px;
		bottom: 20px;
		padding: 0px 10px;
	}

	.text p:nth-child(1) {
		font-size: 22px;
		color: white;
	}

	.text p:nth-child(2) {
		font-size: 14px;
		color: whitesmoke;
	}

	.swiper-pagination-fraction,
	.swiper-pagination-custom,
	.swiper-container-horizontal>.swiper-pagination-bullets {
		bottom: 10px!important;
		left: 130px!important;
		width: 100%!important;
	}

	.swiper-pagination-bullet {
		height: 8px !important;
		width: 8px !important;
		background: #D0CDCD!important;
	}

	.swiper-pagination-bullet-active {
		width: 25px !important;
		height: 8px !important;
		background: white !important;
		border-radius: 15px !important;
	}
</style>
